<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="admin-resources-video">
    <div class="clearfix add-box">
      <el-button
        size="mini"
        type="primary"
        @click="addBtnClick">
        <i class="el-icon-plus"/>
      </el-button>
      <input
        class="w-input-hid"
        type="file"
        @change="fileChange"
        accept="video/*"
        ref="FILE_INPUT">
      <w-search-bar
        @search="searchBtnClick"
        class="w-float-right"/>
    </div>
    <br>
    <!--选择的视频-->
    <el-card
      class="box-card"
      v-if="file">
      <div
        slot="header"
        class="clearfix">
        <span>要上传的视频</span>
        <el-button
          style="float: right; padding: 3px 0"
          @click="upImage"
          type="text"
          :loading="upLoading"
          :disabled="upLoading">确定上传</el-button>
      </div>
      <span>{{ file.name }}</span>
    </el-card>
    <!--视频列表-->
    <ul class="video-list clearfix">
      <li
        class="video-box w-image-fill w-hover-glow"
        v-for="(v, k) in loadListModel.dataArr"
        :key="k"
        v-lazy:background-image="v.pcVideoFromeUrl || defaultImage">
        <video
          v-if="v.play"
          :src="v.photoUrl"
          height="300px"
          width="300px"
          autoplay="autoplay"
          controls="controls">
          您的浏览器不支持 video 标签。
        </video>
        <icon-play
          v-else
          class="play-icon w-pointer"
          width="40"
          @click.native="palyBtnClick(v)"
          height="40"/>
        <i
          @click.stop="removeBtnClick(v, k)"
          class="el-icon-close clear w-pointer"/>
      </li>
    </ul>
    <!--底部加载更多-->
    <w-load-more :load-model="loadListModel"/>
  </div>
</template>

<script>
  import { GetOneFile } from 'yb-tool'
  import OSS from '@/api/OSS'
  import Config from '@/config/index'
  import WLoadMore from '@/components/global/loadMore/index'
  import IconPlay from '@/icons/play.svg'
  import OSSListLoad from '@/models/oss/OSSListLoad'
  import WSearchBar from '../../com/searchBar/dayOrMonth'
  export default {
    name: 'AdminResourcesPhoto',
    inject: ['bgImage'],
    components: {
      WLoadMore,
      IconPlay,
      WSearchBar
    },
    data() {
      return {
        // 时间
        searchDate: null,
        // 文件对象
        file: null,
        // 是否上传中
        upLoading: false,
        // 列表加载模型
        loadListModel: new OSSListLoad(Config.photoBocket, 'OSS_video_')
      }
    },
    watch: {
      loading() {
        if (!this.loading && this.isReloadData) {
          this.isReloadData = false
          this.clearData()
        }
      }
    },
    methods: {
      // 添加按钮点击
      addBtnClick() {
        this.$refs['FILE_INPUT'].click()
      },
      // 查找按钮点击
      searchBtnClick(prefix) {
        this.loadListModel.prefix = `OSS_video_${prefix}`
        this.reloadData()
      },
      // 文件改变的时候
      async fileChange(e) {
        this.file = await GetOneFile(e)
      },
      // 上传数据
      upImage() {
        this.upLoading = true
        OSS.aLiFileUp(this.file, Config.photoCDNPerfix, '', 'video').then(() => {
          this.$w_popview.msgSuccess('上传完成')
          this.file = null
          this.reloadData()
        }).catch(() => {
          this.$w_popview.msgError('上传失败')
        }).finally(() => {
          this.upLoading = false
        })
      },
      // 删除按钮点击
      async removeBtnClick(v, k) {
        this.w_remove_pop(() => {
          return v.removeData('wyb-photo')
        }, '图片').w_then(() => {
          this.loadListModel.dataArr.splice(k, 1)
        })
      },
      // 重新加载数据
      reloadData() {
        this.loadListModel.clearData()
        this.loadListModel.loadData()
      },
      // 播放按钮点击
      palyBtnClick(v) {
        this.loadListModel.dataArr.forEach((item) => {
          item.play = false
        })
        v.play = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .admin-resources-video {
    >.video-list {
      list-style: none;
      margin: 0;
      padding: 0;
      padding-top: 20px;
      >.video-box {
        float: left;
        margin: 10px;
        width: 300px;
        height: 300px;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        >.play-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -20px;
          margin-top: -20px;
        }
        >.clear {
          background-color: rgba(3,3,3,.3);
          position: absolute;
          right: 5px;
          font-size: 20px;
          top: 5px;
          color: #ddd;
          padding: 2px;
          border-radius: 50%;
        }
        >.clear:hover {
          color: #fff;
          background-color: rgba(255,3,3,.8);
        }
      }
    }
  }
</style>
